.prohibit {
	.layout();

	position: relative;
	background-color: var(--app-container-bg);
	.prohibit-top {
		.prohibitCover();

		height: 30%;
		animation: prohibit-top 1s forwards;
		&::after {
			.prohibitCoverAfter();

			top: 100%;
		}
	}
	.prohibit-top-hide {
		animation: prohibit-top-hide 1s forwards;
	}
	.prohibit-bottom {
		.prohibitCover();

		top: 30%;
		height: 70%;
		text-align: center;
		animation: prohibit-bottom 1s forwards;
		&::after {
			.prohibitCoverAfter();

			top: 0;
		}
		.el-input {
			width: 200px;
			margin-top: 30px;
		}
	}
	.prohibit-bottom-hide {
		animation: prohibit-bottom-hide 1s forwards;
	}
	:deep(.markdown) {
		height: 100%;
		padding: 0 20px;
		margin-bottom: 20px;
		overflow-y: scroll;
		background-color: var(--app-container-bg);
		pre {
			position: relative;
			padding: 30px 20px 20px;
			border-radius: 5px;
			&::after {
				.iphoneStyle();
			}
			&::before {
				.iphoneStyle(#dea123);

				left: 40px;
			}
			code {
				&::before {
					.iphoneStyle(#1aab29);

					left: 60px;
				}
			}
		}
		blockquote {
			position: relative;
			&::after {
				position: absolute;
				top: 0;
				left: -40px;
				width: 5px;
				height: 100%;
				content: '';
				background-color: #dfe2e5;
			}
			p {
				margin-left: -20px;
			}
		}
	}
}

.prohibitCover() {
	position: absolute;
	z-index: 1;
	width: 100%;
	overflow: hidden;
	background-color: var(--app-main-bg-color);
}
.prohibitCoverAfter() {
	position: absolute;
	left: 50%;
	width: 50px;
	height: 50px;
	content: '';
	background-image: url('@/assets/img/dahuai.jpg');
	background-position: center;
	background-size: cover;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
.iphoneStyle(@background: #e0443e) {
	position: absolute;
	top: 10px;
	width: 15px;
	height: 15px;
	content: '';
	background: @background;
	border-radius: 50%;
}

@keyframes prohibit-top {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes prohibit-top-hide {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-100%);
	}
}
@keyframes prohibit-bottom {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes prohibit-bottom-hide {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(100%);
	}
}
